<template>
  <div ref="graph"
       class="charts chart-graph"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
echarts.registerTheme('tdTheme', tdTheme)
export default {
    name: 'ChartBar',
    data () {
        return {
            chart_dom: ''
        }
    },
    props: {
        data: Array
    },
    computed: {
        seriesData () {
            let tempData = []
            this.data.forEach(element => {
                tempData.push(element.sourceObject)
                tempData.push(element.targetObject)
            })
            tempData = Array.from(new Set(tempData))
            return tempData.map(item => {
                return {
                    name: item,
                    symbolSize: item ? item.length * 14 : 30
                }
            })
        },
        links () {
            let links = []
            this.data.forEach(item => {
                let curvenessVal = item.linkType === 'TwoWay' ? 0 : -0.1
                links.push({
                    source: item.sourceObject,
                    target: item.targetObject,
                    value: item.linkName,
                    lineStyle: {
                        curveness: curvenessVal,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 10
                    }
                })
                if (item.linkType === 'TwoWay') {
                    links.push({
                        target: item.sourceObject,
                        source: item.targetObject,
                        value: item.linkName,
                        lineStyle: {
                            curveness: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            shadowBlur: 10
                        }
                    })
                }
            })
            return links
        }
    },
    mounted () {
        this.init()
    },
    methods: {
        init () {
            this.chart_dom = echarts.init(this.$refs.graph, 'tdTheme')
            let option = {
                title: {
                    text: '对象关系统计',
                    x: 'center',
                    padding: 15,
                    textStyle: {
                        color: '#28478d'
                    }
                },
                backgroundColor: '#f0f0f0',
                tooltip: {
                    trigger: 'item',
                    formatter: '{c} '
                },
                animationDurationUpdate: 1500,
                animationEasingUpdate: 'quinticInOut',
                series: [
                    {
                        type: 'graph',
                        layout: 'circular',
                        top: 56,
                        symbolSize: 50,
                        focusNodeAdjacency: true,
                        tooltip: {
                            formatter: '{b0}: {c0}<br />'
                        },
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: '#fff',
                                borderWidth: 1,
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.3)'
                            }
                        },
                        edgeSymbol: ['circle', 'arrow'],
                        edgeSymbolSize: [4, 10],
                        edgeLabel: {
                            normal: {
                                textStyle: {
                                    fontSize: 20
                                }
                            }
                        },
                        data: this.seriesData,
                        links: this.links,
                        roam: true,
                        emphasis: {
                            lineStyle: {
                                width: 5
                            }
                        },
                        lineStyle: {
                            normal: {
                                color: 'source',
                                curveness: 0.3
                            }
                        }

                    }
                ]
            }

            this.chart_dom.setOption(option)
        },
        resize () {
            this.$nextTick(() => {
                this.chart_dom.resize()
            })
        }
    }
}
</script>

<style lang="less">
.chart-graph {
	height: 100%;
}
</style>
